import React, { useState } from "react";
import { Button, Modal, Result, Form } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { message, Steps } from "antd";
import { useMemoizedFn, useReactive } from "ahooks";
import UploadFilde from "./UploadFile";
import UploadLrcFile from "./UploadLrcFile";
import { FormData, LyricTypeEnum, LyricFormData } from "./components";

interface AppPropsInt {
  handleOk: (val: FormData & { url: string }) => void;
}

const App: React.FC<AppPropsInt> = (props) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [current, setCurrent] = useState(0);
  const formData = useReactive<LyricFormData>({
    text: "",
    lyricType: LyricTypeEnum.lyric,
    url: "",
  });

  const showModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  const handleOk = () => {
    if (!formData.url) {
      message.error("请输入或上传音频");
      return;
    }
    if (!formData.text) {
      message.error("请输入歌词");
      return;
    }
    if (props.handleOk) {
      props.handleOk({ ...formData });
      setCurrent(0);
      closeModal();
    }
  };

  const handleCancel = () => {
    closeModal();
  };

  const onChangeLrc = useMemoizedFn((data) => {
    Object.assign(formData, data);
  });

  return (
    <>
      <Button type="primary" color="primary" onClick={showModal}>
        <UploadOutlined />
        上传
      </Button>
      <Modal
        title="文件上传"
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        cancelText="取消"
        okText="确定"
        footer={(pre) => {
          const Prea = () => pre;
          const arr = [<Prea key="pre" />];
          if (current < 2) {
            arr.push(
              <Button key={"next"} onClick={() => setCurrent((pre) => pre + 1)}>
                下一步
              </Button>
            );
          }

          if (current > 0 && current < 3) {
            arr.push(
              <Button key={"prev"} onClick={() => setCurrent((pre) => pre - 1)}>
                上一步
              </Button>
            );
          }

          return arr;
        }}
      >
        <Steps
          current={current}
          items={[
            {
              title: "音频",
            },
            {
              title: "歌词",
            },
            {
              title: "完成",
            },
          ]}
        ></Steps>
        {current === 0 && (
          <UploadFilde
            value={formData.url}
            onChange={(url) => (formData.url = url)}
          />
        )}
        {current === 1 && (
          <UploadLrcFile value={formData} onChage={onChangeLrc} />
        )}
        {current === 2 && <Result status="success" title="上传成功!" />}
      </Modal>
    </>
  );
};

export default App;
